package com.gitee.wsl.compose.ui.accordion

import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.unit.dp
import org.jetbrains.compose.resources.DrawableResource
import org.jetbrains.compose.resources.painterResource

@Composable
fun AccordionItem(
    painter: Painter,
    isSelected: Boolean,
    onClick: () -> Unit
) {
    val width by animateDpAsState(
        targetValue = if (isSelected) 300.dp else 100.dp,
        animationSpec = tween(1000, easing = FastOutSlowInEasing)
    )
    val background by animateColorAsState(
        targetValue = if (isSelected) Color.LightGray else Color.Gray,
        animationSpec = tween(1000, easing = FastOutSlowInEasing)
    )

    Box(
        modifier = Modifier
            .padding(8.dp)
            .width(width)
            .height(200.dp)
            .clip(RoundedCornerShape(16.dp))
            .clickable { onClick() }
            .background(background)
    ) {
        Image(
            painter = painter,
            contentDescription = null,
            modifier = Modifier.fillMaxSize()
        )
    }
}


@Composable
fun AccordionList(painterList: List<DrawableResource>) {
    var selectedIndex by remember { mutableStateOf(1) }

    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Center
    ) {
        painterList.forEachIndexed { index, painter ->
            AccordionItem(
                painter = painterResource(painter),
                isSelected = index == selectedIndex,
                onClick = { selectedIndex = if (selectedIndex == index) -1 else index }
            )
        }
    }
}

//@Composable
//fun AccordionScreen() {
//    val imageList = listOf(
//        Res.drawable.tree1,
//        Res.drawable.tree2,
//        Res.drawable.tree3,
//        Res.drawable.tree4
//    )
//
//    MaterialTheme {
//        Surface {
//            AccordionList(painterList = imageList)
//        }
//    }
//}
